<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>后台管理系统</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- plugins css-->
  <link href="css/vendor/switchery.min.css" rel="stylesheet" type="text/css" />

  <!-- Plugins js -->
  <script src="js/vendor/switchery.min.js"></script>
  <script src="js/vendor/bootstrap-maxlength.min.js"></script>
  <script src="js/pages/form-advanced.init.js"></script>

  <!-- App favicon -->
  <link rel="shortcut icon" href="assets/images/favicon.ico">

  <!-- App css -->
  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="css/icons.min.css" rel="stylesheet" type="text/css" />
  <link href="css/app.min.css" rel="stylesheet" type="text/css" />
  <!-- App js -->
  <script src="/js/vendor.min.js"></script>
  <script src="/js/app.min.js"></script>

  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>


</head>

<body>
<div id="app">
  <!-- Navigation Bar-->
  <header id="topnav">
    <nav class="navbar-custom">

      <div class="container-fluid">
        <ul class="list-unstyled topbar-right-menu float-right mb-0">

          <li class="dropdown notification-list">
            <!-- Mobile menu toggle-->
            <a class="navbar-toggle nav-link">
              <div class="lines">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </a>
            <!-- End mobile menu toggle-->
          </li>



          <li class="dropdown notification-list">
            <a class="nav-link dropdown-toggle nav-user mr-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
              <img src="assets/images/users/2.jpg" alt="user-image" class="rounded-circle">
              <small class="pro-user-name ml-1">
                Admin
              </small>
            </a>
            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown ">
              <!-- item-->
              <div class="dropdown-header noti-title">
                <h6 class="text-overflow m-0">欢迎 !</h6>
              </div>

              <!-- item-->
              <a href="adminInfo.html" class="dropdown-item notify-item">
                <i class="fe-user"></i>
                <span>管理员信息</span>
              </a>

              <!-- item-->
              <a href="adminJournal.html" class="dropdown-item notify-item">
                <i class="fe-settings"></i>
                <span>日志</span>
              </a>

              <div class="dropdown-divider"></div>

              <!-- item-->
              <a href="pages-login.html" class="dropdown-item notify-item">
                <i class="fe-log-out"></i>
                <span>退出</span>
              </a>

            </div>
          </li>

        </ul>

        <ul class="list-inline menu-left mb-0">
          <li class="float-left">
            <a href="page-index.html" class="logo">
                                <span class="logo-lg" >
                                    <img src="assets/images/111.png" alt="" height="42">
                                </span>
              <!-- <span class="logo-sm">
                  <img src="assets/images/logo-sm.png" alt="" height="28">
              </span> -->
            </a>
          </li>
          <!--                        <li class="app-search">-->
          <!--                            <form>-->
          <!--                                <h2 style="color: azure;">学 习 养 成 计 划</h2>-->
          <!--                            </form>-->
          <!--                        </li>-->
        </ul>
      </div>

    </nav>
    <!-- end topbar-main -->

    <div class="topbar-menu">
      <div class="container-fluid">
        <div id="navigation">
          <!-- Navigation Menu-->
          <ul class="navigation-menu">

            <li class="has-submenu">
              <a href="page-index.html">
                <i class="fe-airplay"></i>首页</a>
            </li>

            <li class="has-submenu">
              <a href="userQuery.html">
                <i class="fe-user"></i>用户管理</a>
            </li>

            <li class="has-submenu">
              <a href="taskQuery.html">
                <i class="mdi mdi-codepen"></i>任务管理</a>
            </li>

            <li class="has-submenu">
              <a href="tipQuery.html">
                <i class="mdi mdi-brightness-5"></i>心得管理</a>
            </li>



            <li class="has-submenu">
              <a href="chartUser.html"> <i class="mdi mdi-elevation-rise"></i>数据分析</a>
              <ul class="submenu">
                <li>
                  <a href="chartUser.html">用户分析</a>
                </li>
                <li>
                  <a href="chartTask.html">任务分析</a>
                </li>
                <li>
                  <a href="chartTip.html">心得分析</a>
                </li>
                <li>
                  <a href="chartAction.html">单个用户行为分析</a>
                </li>
              </ul>
            </li>



          </ul>
          <!-- End navigation menu -->

          <div class="clearfix"></div>
        </div>
        <!-- end #navigation -->
      </div>
      <!-- end container -->
    </div>
    <!-- end navbar-custom -->
  </header>
  <!-- End Navigation Bar-->


  <div class="wrapper" style="padding-top: 65px;">
    <div class="container-fluid">

      <!--  start标题-->
      <div class="row">
        <div class="col-12">
          <div class="page-title-box">
            <div class="page-title-right">
              <ol class="breadcrumb m-0">
                <li class="breadcrumb-item"><a href="page-index.html">洋葱</a></li>
                <li class="breadcrumb-item"><a href="userQuery.html">用户管理</a></li>
                <li class="breadcrumb-item"><a href="userBlock.html">用户拉黑</a></li>

              </ol>
            </div>
            <h4 class="page-title">用户拉黑</h4>
          </div>
        </div>
      </div>
      <!--  end标题-->

      <!-- start     用户信息表-->
      <div>
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-body">
                <h3 class="header-title mb-3">确认拉黑</h3>

                <form class="needs-validation" novalidate>
<!--                  <div class="form-group mb-3" v-for="(item,index) in userList" >-->
<!--                    <label for="userID">用户ID</label>-->
<!--                    <input type="text" v-model="userList[0].userID" class="form-control" id="userID" readonly >-->
<!--                  </div>-->

                  <div class="form-group mb-3" v-for="(item,index) in userList">
                    <label for="userName">用户名称</label>
                    <input type="text" v-model="userList[0].userName" class="form-control" id="userName" readonly >
                  </div>
                  <button class="btn btn-primary" type="button" @click="blockUser">确认</button>
                </form>

              </div> <!-- end card-body-->
            </div> <!-- end card-->
          </div> <!-- end col-->
        </div> <!-- end card-->
      </div> <!-- end col-->
      <!-- end     用户信息表-->

      <!-- start     已拉黑用户查询结果表格-->
      <div>
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-body">
                <h3 class="header-title mb-3">拉黑名单</h3>

                <table class="table table-hover mb-0">
                  <thead>
                  <tr>
                    <th>用户ID</th>
                    <th>用户名</th>
                    <th>用户状态</th>
                    <th>选择操作</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item,index) in List">
                    <td>{{item.userID}}</td>
                    <td>{{item.userName}}</td>
                    <td>{{item.userType==true?'已拉黑':'正常'}}</td>
                    <td><a  href="#" @click="removeUser">解除拉黑</a></td>
                  </tbody>
                </table>

              </div> <!-- end card-body-->
            </div> <!-- end card-->
          </div> <!-- end col-->
        </div> <!-- end card-body-->
      </div> <!-- end card-->
      <!-- end     已拉黑用户查询结果表格-->

    </div> <!-- end container-->
  </div><!--  end wrapper-->


  <!-- Footer Start -->
  <footer class="footer">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
          YangCong Admin &copy; 2021 - tecms.net
        </div>
        <div class="col-md-6">
          <div class="text-md-right footer-links d-none d-sm-block">
            <a href="#">关于我们</a>
            <a href="#">帮助</a>
            <a href="#">联系我们</a>
          </div>
        </div>
      </div>
    </div>
  </footer>        <!-- end Footer -->



</div>

</body>
</html>
<script>
  var vm = new Vue({
    el:"#app",
    data:{
      mymenus:[],
      userList:[],
      List:[],
      ID:''

    },

    //"userName='admin'&pwd='admin'"
    methods:{
      blockUser:function(){
        var userID=ID;
        axios.get('/user/updateUserType', {
          params: {
            userID: userID
          }
        })
                .then(function (response) {
                  // console.log(response.data)
                  //console.log("用户ID为" + id)
                  if(response.data.code==200){
                    alert("拉黑成功！")
                    location.href="userBlock.html"
                  }                  //成功则跳转回userBlock.html页面
                })
                .catch(function (error) {
                  console.log(error);
                });

      },
      removeUser:function(){
        var userID=ID;
        axios.get('/user/remove', {
          params: {
            userID: userID
          }
        })
                .then(function (response) {
                  console.log("解除拉黑成功！");
                  if(response.data.code==200){
                    alert("解除拉黑成功！")
                    location.href="userBlock.html"
                  }                  //成功则跳转回userBlock.html页面
                })
                .catch(function (error) {
                  console.log(error);
                });

      }
    },
    mounted(){
      _this = this
      axios.get('js/MenuInfo.json')
              .then(function (response) {
                var str = response.data
                str = eval('('+ str +')');
                _this.mymenus = str;
                // console.log(_this.mymenus);
              })
              .catch(function (error) {
                console.log(error);
              })
      var userID = window.localStorage.getItem("userID") //获取主键id//将主键id传到后台
      axios.get('/user/getlist',{
        params:{
          userID:userID
          //"key:value"
        }
      })  //后台根据主键id查询信息，得到数据回写到当前页面
              .then(function (response){
                _this.userList=response.data
                console.log("查询成功！");
                this.ID=userID;
                // console.log("用户ID为" + this.ID)
              })
              .catch(function (error) {
                console.log(error);
              });

      axios.get('/user/userlist')  //后台根据主键id查询信息，得到数据回写到当前页面
              .then(function (response){
                _this.List=response.data.object
                console.log("查询成功！");
              })
              .catch(function (error) {
                console.log(error);
              });

    }
  })
</script>
